<template>
	<view>
		<!-- #ifndef MP -->
		<!-- 头部空出的距离 -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<!-- 头部用户信息 -->
		<view class="my-header">
			<view @click="hasLogin ? navTo('/pages/my/user') :  navTo('/pages/auth/login')"
				class="header-content space-between center">
				<view class="left center">
					<image class="header-image" :src="userInfo.imageUrl || '/static/logo.png'" ></image>
					<!-- 根据登录状态显示用户信息或提示登录 -->
					<view v-if="hasLogin" class="header-info column">
						<text class="nickname">{{userInfo.nickName}}</text>
						<text class="username">用户名：{{userInfo.username}}</text>
					</view>
					<view v-else class="header-info">
						<text class="nickname">请登录</text>
						</view>
				</view>
				<!-- 右侧箭头图标 -->
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 功能列表 -->
		<mxg-list :list="list" ></mxg-list>
	</view>
</template>

<script>
	import list from '@/config/my-list-bar.js'

	import {mapState, mapGetters} from 'vuex'

	export default {
		data() {
			return {
				list: list() // 调用方法 ，不要少了小括号
			}
		},

		computed: {
			...mapState(['userInfo']),  // 映射userInfo状态
			...mapGetters(['hasLogin']) // 映射hasLogin getter
			/* userInfo() {
				return this.$store.state.userInfo
			} */
		},

		methods: {
		}
	}
</script>

<style lang="scss">
	// 状态栏占位样式
	.status_bar {
		height: calc(var(--status-bar-height) + 48px);  // 高度为状态栏高度加48px
		width: 100%;  // 宽度100%
		background-color: $mxg-color-primary;  // 背景色
	}

	// 我的页面头部样式
	.my-header {
		background-color: $mxg-color-primary;  // 背景色
		.header-content {
			padding: 50rpx 39rpx;  // 内边距
			background-color: #FFFFFF;  // 背景色
			border-radius: 30rpx 30rpx 0 0;  // 上圆角
		}

		.left {
			.header-image {
				width: 150rpx;   // 宽度
				height: 150rpx;  // 高度
				border-radius: 80rpx;  // 圆角（圆形）
			}
			.header-info{
				margin-left: 30rpx;  // 左外边距
				.nickname {
					font-size: 39rpx;  // 字体大小
					font-weight: bold; // 字体加粗
				}
				.username {
					font-size: 33rpx;  // 字体大小
					color: $mxg-text-color-grey;  // 字体颜色
				}
			}
		}

		.icon-right {
			font-size: 35rpx;  // 字体大小
			color: $mxg-text-color-grey;  // 字体颜色
		}
	}
</style>
